<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="1200px" append-to-body custom-class="import-dialog">
      <div class="dialog-content">
        <p>上传图片且确认后，即视为签约完成</p>
      </div>
      <el-form ref="form" :model="form">
        <el-form-item label="">
          <image-upload v-model="form.contractImageList" :limit="30" @change="imageUploadChange"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">保 存</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { debounce } from '@/utils'
import { uploadContractImage } from '@/api/contract/lessee'

export default {
  name: 'upload-contract',
  props: {
    title: {
      type: String,
      default: '上传合同'
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      default: {}
    }
  },
  data() {
    return {
      form: {
        lesseeContractId: '',//合同id
        contractImageList: []//合同图片集合
      }
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)   // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
      }
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init()
      }
    }
  },
  methods: {
    init() {
      this.form = {
        lesseeContractId: this.data.lesseeContractId,//合同id
        contractImageList: []//合同图片集合
      }
    },
    imageUploadChange(file) {
      console.log(file)
      this.form.contractImageList = file.map(item => item.url)
    },
    submit: debounce(function() {
      if(!this.form.contractImageList.length){
        this.$message.error('请上传图片')
        return
      }
      uploadContractImage(this.form).then(res => {
        this.$message.success(res.msg)
        this.$emit('success',res)
        this.close()
      }).catch(err => {
        this.$message.error('上传失败')
      })
      this.close()
    }, 500, true),
    close() {
      console.log('close')
      this.visible = false
    }
  }
}
</script>


<style scoped lang="scss">
.dialog-content {
  padding: 5px;
  background: #F2F2F2;
  margin-bottom: 10px;
}

</style>
